/**
* 系统管理 医生管理
*/
<template>
  <div style="width: 100%;height: 100%">
    <el-row :model="formInline" style="height: 5%;width: 100%;display: flex;align-items: center;">
      <el-col :span="0.5" style="margin-right: 0.5vw">
        <el-text size="large">搜索:</el-text>
      </el-col>
      <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
        <el-input size="large" v-model="formInline.userName" placeholder="请输入医生姓名或编号"></el-input>
      </el-col>
      <el-col :span="4" style="display: flex;">
        <el-button size="large" style="background-color:#04c1a5;color:#fff">
          <font-awesome-icon icon="fas fa-search" />
          <span style="margin-left:1vh">查询</span>
        </el-button>
        <el-button size="large" style="background-color:#04c1a5;color:#fff" @click="handleAdd">
          <font-awesome-icon icon="fas fa-plus" />
          <span style="margin-left:1vh">医生录入</span>
        </el-button>
      </el-col>
      <el-col :span="16" >

      </el-col>
    </el-row>
    <el-row style="
    background-color: white;
    height: 35%;
    margin-top: 2vh;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
      <filter-list :filter-rows="rows" @updateList="updateList"/>
    </el-row>
    <el-row style="display: flex;justify-content: flex-end;align-items: center;height: 5%;width: 100%;margin-bottom: 10px">
      <el-pagination
          v-model:current-page="pageParam.pageNo"
          v-model:page-size="pageParam.pageSize"
          v-model:total="pageParam.totalCount"
          :page-sizes="[5, 10, 15, 20]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-row>
    <el-table
        :header-cell-style=" { background: '#F7FBFE' , color: '#000' , 'text-align': 'center' }"
        size="large"
        :cell-style="{'text-align':'center'}"
        style="width: 100%"
        :data="doctorList"
        highlight-current-row
        class="customer-table"
        border
        v-loading="loading"
        element-loading-text="拼命加载中">
      <el-table-column sortable prop="id" label="医生编号" width="150">
      </el-table-column>
      <el-table-column sortable prop="name" label="医生姓名" width="150">
      </el-table-column>
      <el-table-column sortable prop="username" label="电话号码" min-width="200">
      </el-table-column>
      <el-table-column sortable prop="department" label="科室" width="200">
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="300">
        <template v-slot="scope">
          <el-button size="default" type="success" @click="handleEdit(scope.row)">
            <font-awesome-icon icon="fas fa-edit" />
            <span style="margin-left:1vh">编辑信息</span>
          </el-button>
          <el-button size="default" style="background-color: #04C1A5" @click="resetPass(scope.row.username)">
            <font-awesome-icon icon="fa fa-sync-alt" style="color: white"/>
            <span style="margin-left:1vh;color: white">重置密码</span>
          </el-button>
          <!-- <el-button size="small" type="success" @click="resetpwd(scope.$index, scope.row)">重置密码</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="医生信息编辑" v-model="editFormVisible" width="30%" align-center center @close="handleClose">
      <el-form style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;flex-wrap: wrap">
        <el-form-item style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row">
          <el-text size="large" style="width: 20%">姓名:</el-text>
          <el-input style="width: 80%" v-model="editForm.name"  autocomplete="off"/>
        </el-form-item>
        <el-form-item style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row">
          <el-text size="large" style="width: 20%">手机号:</el-text>
          <el-input style="width: 80%" v-model="editForm.username" placeholder="请输入手机号" autocomplete="off"/>
        </el-form-item>
        <el-form-item style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row">
          <el-text size="large" style="width: 20%">科室:</el-text>
          <el-input style="width: 80%" v-model="editForm.department" placeholder="请输入科室" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" style="background-color: #04c1a5;border: 0" @click="confirmEdit">保存</el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog title="医生录入" v-model="addFormVisible" width="30%" align-center center @close="addFormClose">
      <el-form style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;flex-wrap: wrap">
        <el-form-item style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row">
          <el-text size="large" style="width: 20%">姓名:</el-text>
          <el-input style="width: 80%" v-model="addForm.name" placeholder="请输入医生姓名" autocomplete="off"/>
        </el-form-item>
        <el-form-item style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row">
          <el-text size="large" style="width: 20%">手机号:</el-text>
          <el-input style="width: 80%" v-model="addForm.username" placeholder="请输入医生手机号" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" style="background-color: #04c1a5;border: 0" @click="confirmAdd">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import Pagination from '../../components/Pagination.vue';
import {onMounted, ref} from "vue";
import admin from "@/api/admin.js";
import {ElMessage, ElMessageBox} from "element-plus";
import FilterList from "@/components/tableViews/filterList.vue";
const loading = ref(false); // 显示加载
// 请求数据参数
const formInline = ref({
  userName: '',
});
const doctorList = ref([]);
const editFormVisible = ref(false);
const editForm = ref({
  name:'',
  username: '',
  department: '',
});


//按钮查询过滤
const rows = ref([
  { label: '科室', buttons: [
      { text: '-全部-', value: null,selected: true },
      { text: '皮肤科', value: '皮肤科',selected: false },
      { text: '神经科', value: '神经科',selected: false },
      { text: '放射科', value: '放射科',selected: false },
    ] },
  // { label: '总评分', buttons: [
  //     { text: '-全部-', selected: true },
  //     { text: '0.0~1.0分', selected: false },
  //     { text: '1.1~2.0分', selected: false },
  //     { text: '2.1~3.0分', selected: false },
  //     { text: '3.1~4.0分', selected: true },
  //     { text: '4.1~5.0分', selected: false },
  //   ] },
  // { label: '回复量', buttons: [
  //     { text: '-全部-', selected: true },
  //     { text: '0~100', selected: false },
  //     { text: '100~300', selected: false },
  //     { text: '300~500', selected: false },
  //     { text: '500~1000', selected: false },
  //     { text: '大于1000', selected: true },
  //   ] },
]);
const updateList = (rows) =>{
  const doctorSearchQuery = {
    pageIndex: pageParam.value.pageNo - 1,
    pageSize: pageParam.value.pageSize
  }
  // 调用更新方法
  updateDoctorSearchQuery(rows, doctorSearchQuery);
  requestDoctorList(doctorSearchQuery)
}

//分页模块
const pageParam = ref({
  pageNo:1,
  pageSize:10,
  totalCount:10,
  totalPages:10,
  nextPage:0,
  prePage:0,
  hasPre:false,
  hasNext:true,
});
const handleCurrentChange = (newPage)=>{
  pageParam.value.pageNo = newPage;
  const userSearchQuery = {
    name:null,
    username:null,
    status:null,
    sex:null,
    age:null,
    ageEnd:null,
    pageIndex: pageParam.value.pageNo - 1,
    pageSize: pageParam.value.pageSize
  }
  // 调用更新方法
  updateUserSearchQuery(rows.value, userSearchQuery);
  //执行查询
  requestUserList(userSearchQuery);
}
const handleSizeChange = ()=>{
  const deviceListQuery = {
    pageIndex: pageParam.value.pageNo - 1,
    pageSize: pageParam.value.pageSize,
  }
  updateUserSearchQuery(rows.value,deviceListQuery)
  requestUserList(deviceListQuery)
}
function updatePageParams(pageData) {
  pageParam.value.pageNo = pageData.pageNo;
  pageParam.value.pageSize = pageData.pageSize;
  pageParam.value.totalCount = pageData.totalCount;
  pageParam.value.totalPages = pageData.totalPages;
  pageParam.value.nextPage = pageData.nextPage;
  pageParam.value.hasNext = pageData.hasNext;
  pageParam.value.prePage = pageData.prePage;
  pageParam.value.hasPre = pageData.hasPre;
}
function updateSelectedValue(buttons) {
  for (const button of buttons) {
    if (button.selected) {
      return button.value;
    }
  }
  return null;
}

//列表查询
onMounted(() => {
  getDoctorList();
});
const updateDoctorSearchQuery = (rows, doctorSearchQuery)=>{
  doctorSearchQuery.department = updateSelectedValue(rows[0].buttons);
}
const requestDoctorList = (doctorSearchQuery)=>{
  loading.value = true;
  admin.doctorSearch(doctorSearchQuery)
      .then((res) => {
        if (res.data.code === 200) {
          // 将状态码转换为中文描述
          // 将状态码转换为中文描述
          doctorList.value = res.data.data.result
        }
        updatePageParams(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(()=>{
        loading.value = false;
      })
  ;
}
const getDoctorList = ()=>{
  const doctorSearchQuery = {
    pageIndex: pageParam.value.pageNo - 1,
    pageSize: pageParam.value.pageSize
  }
  requestDoctorList(doctorSearchQuery)
}

//信息编辑
const handleEdit = (info)=>{
  editForm.value.name = info.name
  editForm.value.username = info.username
  editForm.value.department = info.department
  editFormVisible.value = true
}
const cancelEdit = ()=>{
  editFormVisible.value = false
}
const confirmEdit = ()=>{
  const doctorInfoEditQuery = editForm.value
  admin.doctorInfoEdit(doctorInfoEditQuery).then((res)=>{
    if (res.data.code === 200){
      ElMessage.success(res.data.msg)
    }else{
      ElMessage.error(res.data.msg)
    }
    getDoctorList();
    editFormVisible.value = false;
  }).catch((err)=>{
    console.log(err)
  })
}
const handleClose = ()=>{
  editForm.value.name = '';
  editForm.value.username = '';
  editForm.value.department = '';
}
const resetPass = (un)=>{
  const message = `是否要重置密码？`;
  ElMessageBox.confirm(message, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const dto = {
      username: un,
      password:''
    }
    admin.doctorResetPassword(dto).then((res)=>{
      if (res.data.code === 200){
        ElMessage.success(res.data.msg);
      }else{
        ElMessage.error(res.data.msg);
      }
    }).catch((err)=>{
      console.log(err)
    })
  }).catch((err) => {
    console.log(err)
  });
}

//新增弹窗
const addFormVisible = ref(false);
const addForm = ref({
  name:'',
  username: '',
});
const handleAdd = ()=>{
  addFormVisible.value = true;
}
const addFormClose = ()=>{
  addForm.value.name = '';
  addForm.value.username = '';
}
const confirmAdd = ()=>{
  admin.addDoctor(addForm.value).then((res)=>{
    if (res.data.code){
      ElMessage.success(res.data.msg);
    }else{
      ElMessage.error(res.data.msg);
    }
    getDoctorList();
  }).catch((err)=>{
    console.log(err);
  }).finally(()=>{
    addFormVisible.value = false;
  })
}
const cancelAdd = ()=>{
  addFormVisible.value = false;
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
::v-deep .customer-table th{
  border:none;
}
::v-deep .customer-table td,.customer-table th.is-leaf {
  border:none;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  /* background-color:#04c1a5; */
  background-color: green;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #04c1a5;
}
</style>